<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="../css/mui.css"/>
    <link rel="stylesheet" href="../css/reset.css" />
    <link rel="stylesheet" href="../css/assort.css" />
    <script src="../js/jquery.min.js"></script>
</head>
<body>
	<!--头部-->
	<header class="mui-bar mui-bar-nav">
			<div class="title-left">
				<a href="#"><img src="../images/assort_logo_01.png" /></a>
			</div>
			<div class="title-middle">
				<a href="#"><img src="../images/sousuo_03.png" /></a>
				<input type="text" placeholder="搜索品牌、商品" />
			</div>
			<div class="title-right">
				<p>2</p>
				<a href="#" class="a1"><img src="../images/fenlei_03.png" /></a>
				<a href="#" class="a2">分&nbsp;类</a>
			</div>
	</header>
	
	<div class="content">
		<!--选项卡-->
		<nav class="mui-bar mui-bar-tab">
		    <a class="mui-tab-item mui-active">
		        <span class="mui-tab-label">健康监测</span>
		    </a>
		    <a class="mui-tab-item">
		        <span class="mui-tab-label">健康监测</span>
		    </a>
		    <a class="mui-tab-item">
		        <span class="mui-tab-label">旅游度假</span>
		    </a>
		    <a class="mui-tab-item">
		        <span class="mui-tab-label">孝心礼品</span>
		    </a>
		    <a class="mui-tab-item">
		        <span class="mui-tab-label">居家日用</span>
		    </a>
		</nav>
		<!--折叠面板-->
		<ul class="mui-table-view">
		    <li class="mui-table-view-cell mui-collapse">
		        <a class="mui-navigate-right" href="#">健康监测</a>
		        <ul class="mui-collapse-content">
	            	<li>
	            		<a href="#"><img src="../images/assort_product_03.png"/>
	            		<p>电子血压计</p></a>
	            	</li>
	            	<li>
	            		<a href="#"><img src="../images/assort_product_03.png"/>
	            		<p>电子血压计</p></a>
	            	</li>
	            	<li>
	            		<a href="#"><img src="../images/assort_product_03.png"/>
	            		<p>电子血压计</p></a>
	            	</li>
	            	<li>
	            		<a href="#"><img src="../images/assort_product_03.png"/>
	            		<p>电子血压计</p></a>
	            	</li>
	            	<li>
	            		<a href="#"><img src="../images/assort_product_03.png"/>
	            		<p>电子血压计</p></a>
	            	</li>
	            	<li>
	            		<a href="#"><img src="../images/assort_product_03.png"/>
	            		<p>电子血压计</p></a>
	            	</li>
	            	<li>
	            		<a href="#"><img src="../images/assort_product_03.png"/>
	            		<p>电子血压计</p></a>
	            	</li>
	            	<li>
	            		<a href="#"><img src="../images/assort_product_03.png"/>
	            		<p>电子血压计</p></a>
	            	</li>
	            	<li>
	            		<a href="#"><img src="../images/assort_product_03.png"/>
	            		<p>电子血压计</p></a>
	            	</li>
		        </ul>
		    </li>
		    <li class="mui-table-view-cell mui-collapse">
		        <a class="mui-navigate-right" href="#">健康监测</a>
		            <ul class="mui-collapse-content">
	            	<li>
	            		<a href="#"><img src="../images/assort_product_03.png"/>
	            		<p>电子血压计</p></a>
	            	</li>
	            	<li>
	            		<a href="#"><img src="../images/assort_product_03.png"/>
	            		<p>电子血压计</p></a>
	            	</li>
	            	<li>
	            		<a href="#"><img src="../images/assort_product_03.png"/>
	            		<p>电子血压计</p></a>
	            	</li>
	            	<li>
	            		<a href="#"><img src="../images/assort_product_03.png"/>
	            		<p>电子血压计</p></a>
	            	</li>
	            	<li>
	            		<a href="#"><img src="../images/assort_product_03.png"/>
	            		<p>电子血压计</p></a>
	            	</li>
	            	<li>
	            		<a href="#"><img src="../images/assort_product_03.png"/>
	            		<p>电子血压计</p></a>
	            	</li>
	            	<li>
	            		<a href="#"><img src="../images/assort_product_03.png"/>
	            		<p>电子血压计</p></a>
	            	</li>
	            	<li>
	            		<a href="#"><img src="../images/assort_product_03.png"/>
	            		<p>电子血压计</p></a>
	            	</li>
	            	<li>
	            		<a href="#"><img src="../images/assort_product_03.png"/>
	            		<p>电子血压计</p></a>
	            	</li>
		        </ul>
		    </li>
		    <li class="mui-table-view-cell mui-collapse">
		        <a class="mui-navigate-right" href="#">体育用品</a>
		        <ul class="mui-collapse-content">
	            	<li>
	            		<a href="#"><img src="../images/assort_product_03.png"/>
	            		<p>电子血压计</p></a>
	            	</li>
	            	<li>
	            		<a href="#"><img src="../images/assort_product_03.png"/>
	            		<p>电子血压计</p></a>
	            	</li>
	            	<li>
	            		<a href="#"><img src="../images/assort_product_03.png"/>
	            		<p>电子血压计</p></a>
	            	</li>
	            	<li>
	            		<a href="#"><img src="../images/assort_product_03.png"/>
	            		<p>电子血压计</p></a>
	            	</li>
	            	<li>
	            		<a href="#"><img src="../images/assort_product_03.png"/>
	            		<p>电子血压计</p></a>
	            	</li>
	            	<li>
	            		<a href="#"><img src="../images/assort_product_03.png"/>
	            		<p>电子血压计</p></a>
	            	</li>
	            	<li>
	            		<a href="#"><img src="../images/assort_product_03.png"/>
	            		<p>电子血压计</p></a>
	            	</li>
	            	<li>
	            		<a href="#"><img src="../images/assort_product_03.png"/>
	            		<p>电子血压计</p></a>
	            	</li>
	            	<li>
	            		<a href="#"><img src="../images/assort_product_03.png"/>
	            		<p>电子血压计</p></a>
	            	</li>
		        </ul>
		    </li>
		    <li class="mui-table-view-cell mui-collapse">
		        <a class="mui-navigate-right" href="#">数码产品</a>
		        <ul class="mui-collapse-content">
	            	<li>
	            		<a href="#"><img src="../images/assort_product_03.png"/>
	            		<p>电子血压计</p></a>
	            	</li>
	            	<li>
	            		<a href="#"><img src="../images/assort_product_03.png"/>
	            		<p>电子血压计</p></a>
	            	</li>
	            	<li>
	            		<a href="#"><img src="../images/assort_product_03.png"/>
	            		<p>电子血压计</p></a>
	            	</li>
	            	<li>
	            		<a href="#"><img src="../images/assort_product_03.png"/>
	            		<p>电子血压计</p></a>
	            	</li>
	            	<li>
	            		<a href="#"><img src="../images/assort_product_03.png"/>
	            		<p>电子血压计</p></a>
	            	</li>
	            	<li>
	            		<a href="#"><img src="../images/assort_product_03.png"/>
	            		<p>电子血压计</p></a>
	            	</li>
	            	<li>
	            		<a href="#"><img src="../images/assort_product_03.png"/>
	            		<p>电子血压计</p></a>
	            	</li>
	            	<li>
	            		<a href="#"><img src="../images/assort_product_03.png"/>
	            		<p>电子血压计</p></a>
	            	</li>
	            	<li>
	            		<a href="#"><img src="../images/assort_product_03.png"/>
	            		<p>电子血压计</p></a>
	            	</li>
		        </ul>
		    </li>
		    <li class="mui-table-view-cell mui-collapse">
		        <a class="mui-navigate-right" href="#">家政服务</a>
		        <ul class="mui-collapse-content">
	            	<li>
	            		<a href="#"><img src="../images/assort_product_03.png"/>
	            		<p>电子血压计</p></a>
	            	</li>
	            	<li>
	            		<a href="#"><img src="../images/assort_product_03.png"/>
	            		<p>电子血压计</p></a>
	            	</li>
	            	<li>
	            		<a href="#"><img src="../images/assort_product_03.png"/>
	            		<p>电子血压计</p></a>
	            	</li>
	            	<li>
	            		<a href="#"><img src="../images/assort_product_03.png"/>
	            		<p>电子血压计</p></a>
	            	</li>
	            	<li>
	            		<a href="#"><img src="../images/assort_product_03.png"/>
	            		<p>电子血压计</p></a>
	            	</li>
	            	<li>
	            		<a href="#"><img src="../images/assort_product_03.png"/>
	            		<p>电子血压计</p></a>
	            	</li>
	            	<li>
	            		<a href="#"><img src="../images/assort_product_03.png"/>
	            		<p>电子血压计</p></a>
	            	</li>
	            	<li>
	            		<a href="#"><img src="../images/assort_product_03.png"/>
	            		<p>电子血压计</p></a>
	            	</li>
	            	<li>
	            		<a href="#"><img src="../images/assort_product_03.png"/>
	            		<p>电子血压计</p></a>
	            	</li>
		        </ul>
		    </li>
		</ul>
	</div>
	
    <script src="../js/mui.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
    	mui.init();
    </script>
    <script type="text/javascript">
    	$(function(){

    			$('nav a').on('click',function(){
    				
					$('.mui-table-view-cell.mui-collapse').eq($(this).index()).toggleClass('mui-active');
					$('.mui-table-view-cell.mui-collapse').eq($(this).index()).siblings().removeClass('mui-active');
					
    			})
    		
    	})
    </script>
</body>
</html>
